<template>
  <div class="basicInfo">
    <div class="bottom-border"></div>
    <table>
      <tr>
        <td>巡检类型：</td>
        <td>{{newBdzXsbgList.XSLX | xjlx}}</td>
        <td>巡检开始时间：</td>
        <td>{{newBdzXsbgList.XSKSSJ }}</td>
        <td>巡检结束时间：</td>
        <td>{{newBdzXsbgList.XSJSSJ}}</td>
        <td>总测点数：</td>
        <td>{{tableObj.xjxxhzTotal}}</td>
      </tr>
      <tr>
        <td>正常测点数：</td>
        <td>{{Total}}</td>
        <td>异常测点数：</td>
        <td>{{tableObj.ycxjxxTatal}}</td>
        <td>遗漏测点数：</td>
        <td>{{tableObj.ylxjxxTatal}}</td>
        <td>人工识别数：</td>
        <td>{{tableObj.rgsbxxTatal}}</td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";

@Component({
  filters: {
    xjlx(val: any) {
      switch (val) {
        case "1":
          val = "例行巡检";
          break;
        case "2":
          val = "自定义巡检";
          break;
        case "3":
          val = "专项巡检";
          break;
        case "4":
          val = "熄灯巡检";
          break;
        case "5":
          val = "特殊巡检";
          break;
      }
      return val;
    },
  },
})
export default class basicInfo extends Vue {
  @Prop() Manipulation: any;
  @Prop({ default: () => "" })
  xjxxhzTotals;
  @Prop({ default: () => "" })
  ycxjxxTatals;
  @Prop({ default: () => "" })
  ylxjxxTatals;
  @Prop({ default: () => "" })
  rgsbxxTatals;
  @Prop({ default: () => "" })
  JHLX;
  tableObj: any = {
    xjxxhzTotal: "",
    ycxjxxTatal: "",
    ylxjxxTatal: "",
    rgsbxxTatal: "",
  };
  BdzXsbgList = {
    XSJSSJ: "",
    XSKSSJ: "",
  };

  get newBdzXsbgList() {
    let list = {
      XSLX: this.Manipulation.XSLX,
      XSKSSJ: this.Manipulation.XSKSSJ || this.BdzXsbgList.XSKSSJ,
      XSJSSJ: this.Manipulation.XSJSSJ || this.BdzXsbgList.XSJSSJ,
    };
    return list;
  }
  init() {
    let params = {
      jhid: this.Manipulation.ID,
      xslx: this.Manipulation.XSLX,
      jhlx: this.JHLX ? this.JHLX : "zjh",
    };
    (this as any).$services
      .getBdzXsbg({ data: params })
      .then((result: any) => {
        console.log(result);
        let data = result.data.gyxsbg || [];
        let first = data[0] || {};
        this.BdzXsbgList = {
          XSJSSJ: first.XSJSSJ,
          XSKSSJ: first.XSKSSJ,
        };
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  mounted() {
    this.init();
    //  console.log(this.tableTatalObj,'09090');
  }
  get Total() {
    return (
      this.tableObj.xjxxhzTotal -
      this.tableObj.ycxjxxTatal -
      this.tableObj.ylxjxxTatal -
      this.tableObj.rgsbxxTatal
    );
  }
  @Watch("xjxxhzTotals", { deep: true })
  private setxjxxhzTotals(newData, oldData) {
    this.tableObj.xjxxhzTotal = newData;
  }
  @Watch("ycxjxxTatals", { deep: true })
  private setycxjxxTatals(newData, oldData) {
    this.tableObj.ycxjxxTatal = newData;
  }
  @Watch("ylxjxxTatals", { deep: true })
  private setylxjxxTatals(newData, oldData) {
    this.tableObj.ylxjxxTatal = newData;
  }
  @Watch("rgsbxxTatals", { deep: true })
  private setrgsbxxTatals(newData, oldData) {
    this.tableObj.rgsbxxTatal = newData;
  }
}
</script>

<style lang="scss" scoped>
.basicInfo {
  width: 100%;
  // height: 0.66rem;
  margin-bottom: 0.26rem;
  .bottom-border {
    margin: 0 0 0.1rem;
  }
  table {
    margin: auto;
    width: 98%;
    height: 100%;
    border-spacing: 0px;
    td {
      width: 12%;
      padding: 0.1rem 0;
      text-align: center;
      border: 1px solid #087eb8;
    }
  }
}
</style>

